<template>
    <div>
        <li class="list" v-for="(item,index) in datas" :key="index">
                <span v-if="!item.flag">{{item.user}}</span>
                <span v-if="!item.flag">{{item.tit}}</span>
                <input v-model="item.user"  v-if="item.flag" />
                <input v-model="item.tit"  v-if="item.flag" />
                <button @click="xiugai(index)" v-if="!item.flag">修改</button>
                 <button v-if="item.flag" @click="sureBtn(item,index)">确定</button>
                <button @click="deletes(index)">删除</button>
        </li>
    </div>
</template>

<script>

export default {
    data(){
        return {
           
        }
    },
    props:{
        datas:Array
    },
    methods:{
        deletes(ind){  //删除
            this.$store.commit("deletes",{
                 ind:ind
            })
        },
        xiugai(ind){  //修改
             this.$store.commit("xiugai",{
                  ind:ind
             })
        },
        sureBtn(item,ind){  //修改后确定
             this.$store.commit("sureBtn",{
                  ind:ind,
                  item:item
             })
        }
    }
}
</script>
<style scoped  lang="scss">
.list{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #000;
    line-height: 50px;
    height: 50px;
    span{
        width: 100px;
        display: block;
         background: greenyellow;
        text-align: center;
    }
    button{
        width: 100px;
        outline: none;
        background: gold;
    }
}
</style>